<template>
  <div class="common-editor">
    <textarea readonly ref="textarea" v-model="value"></textarea>
  </div>
</template>
 
<script>
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/python/python'

const CodeMirror = require('codemirror/lib/codemirror')

export default {
  props: ["value"],
  data() {
    return {
      coder: null, // 实例
      coderOptions: {
        readOnly: true,
        theme: 'blackboard',
        tabSize: 2,
        lineNumbers: true,
      }
    }
  },
  mounted() {
    this.initialize()
  },
  methods: {
    initialize() {
      this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.coderOptions)
      this.coder.setValue(this.value || "")
    }
  }
}
</script>

<style>
.CodeMirror {
  height: auto;
}
</style>